<!-- @format -->

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import ViewNode from './viewNode.vue'
// 定义props
const props = defineProps({
  loading: {
    type: Boolean,
  },
  bgData: {
    type: Object,
  },
  nodes: {
    type: Array,
    required: true,
  },
  // 是否可编辑
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['select', 'remove', 'select-bg', 'change'])

const bgStyl = computed(() => {
  let color = props.bgData?.color || '#f5f5f5'
  return `background-color: ${color}`
})
const bgImg = computed(() => {
  return props.bgData?.url
})
</script>

<template>
  <div class="minishare-view" :class="{ active: !loading, disable: disabled }">
    <div class="minishare-content" :style="bgStyl">
      <div class="minishare-bg">
        <wd-img
          v-if="bgImg"
          width="100%"
          height="100%"
          mode="aspectFill"
          :src="bgImg"
          alt=""
        />
      </div>
      <div class="nodes-x">
        <view-node
          v-for="item in nodes"
          :key="item.id"
          :conf="item"
          @click="$emit('select', item)"
          @change="$emit('change', $event)"
        ></view-node>
      </div>
    </div>
  </div>
</template>

<style scoped>
.minishare-view {
  position: relative;
  padding-top: 80%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.minishare-view.active {
  opacity: 1;
}
.minishare-view.disable::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.minishare-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.minishare-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 0;
}
.nodes-x {
  position: relative;
}
</style>
